<template>
    <div>
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import ItemSyncDetail from './item-sync-detail.vue';

@Component({
    name: 'ItemDynamicPie',
    components: {
        ItemSyncDetail,
    },
})
export default class ItemDynamicPie extends Vue {
    @Prop()
    data: any[];

    @Prop() title: string;
    @Prop() info: any;
    @Prop() riskEntryTypeObj: any;

    chartInstance: any = null;
    detailShow: boolean = false;
    fontSizeValue: number = 15;
    // 各个饼图正常显示时每个模块颜色
    colorPojo: any = {
        特殊计算项: ['#424098', '#feb0ce', '#e16b6d'],
        分母: ['#3062ff', '#1d9fff', '#02f3f0'],
        动态维度模板: ['#00a8e1', '#99cc00', '#e30039'],
        动态维度: ['#3b6291', '#8e3a39', '#728b42'],
    };
    // 各个饼图高亮时每个模块颜色
    colorLightPojo: any = {
        特殊计算项: ['#7d6dff', '#feb0ce', '#f27271'],
        // 特殊计算项: ['red', '#greeb', 'yellow'], // 测试
        分母: ['#3062ff', '#1d9fff', '#02f3f0'],
        动态维度模板: ['#00a8e1', '#99cc00', '#e30039'],
        动态维度: ['#3b6291', '#943c39', '#2f3e36'],
    };
    // 各个饼图高亮时阴影每个模块颜色
    shadowColorPojo: any = {
        特殊计算项: ['#2d3073', '#4b3e5c', '#39273d'],
        分母: ['#0f245d', '#0b3462', '#054d62'],
        动态维度模板: ['#053a5e', '#2e4323', '#4a0d32'],
        动态维度: ['#172c4f', '#301d31', '#1c2933'],
    };
    // 当模块高亮时，其他模块变暗
    darkColorPojo: any = {
        特殊计算项: ['#3c3c8d', '#765a77', '#7c4251'],
        分母: ['#19378d', '#11528d', '#048390'],
        动态维度模板: ['#045883', '#4b691a', '#710a34'],
        动态维度: ['#213b61', '#4e2735', '#3a4c38'],
    };
    startCharts: any = null;
    timer: any = null;
    curIndex: number = -1;
    shadowColor: string = '';
    isNoHighlight: boolean = true;

    @Watch('data', { deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    async mounted() {
        this.initChart();
        // this.updateChart(this.data);
    }

    @Watch('curIndex', { immediate: true, deep: true })
    onWatchCurIndex() {
        if (this.curIndex == -1 || !this.data) {
            return;
        }
        let colors = JSON.parse(JSON.stringify(this.colorPojo[this.title]));
        for (let index = 0; index < 3; index++) {
            if (this.curIndex == index) {
                colors[index] = this.colorLightPojo[this.title][index];
            } else {
                colors[index] = this.darkColorPojo[this.title][index];
            }
        }
        this.shadowColor = this.shadowColorPojo[this.title][this.curIndex];
        let dataOption = {
            series: [{ emphasis: { itemStyle: { color: this.colorLightPojo[this.curIndex], shadowColor: this.shadowColor } } }],
            color: colors,
        };
        this.$emit('getHighlightItem', this.data[this.curIndex], this.title);
        this.chartInstance.setOption(dataOption);
    }

    @Watch('isNoHighlight', { immediate: true, deep: true })
    onWatchIsNoHighlight() {
        if (this.isNoHighlight && this.chartInstance) {
            let colors = JSON.parse(JSON.stringify(this.colorPojo[this.title]));
            let dataOption = {
                color: colors,
            };
            this.chartInstance.setOption(dataOption);
        }
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        // let _this = this;
        // let isSet = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
        // let charPie3currentIndex = 0;

        let that = this;
        let initOption = {
            tooltip: {
                trigger: 'item',
            },
            legend: {
                orient: 'vertical',
                icon:
                    'path://M16.1711539,7 C22.882066,7 28.7582496,10.4779063 32.0002511,15.682597 L15.492372,25 L0.00021052449,16.2548919 C3.15945315,10.7344266 9.21715568,7 16.1711539,7 Z',

                right: '10%',
                // bottom: '15%',
                top: '43%',
                itemGap: 6,
                itemHeight: 8, // 修改icon图形大小
                itemWidth: 10,
                selectedMode: false,
                textStyle: {
                    fontSize: this.fontSizeValue,
                    color: '#b2b7c2',
                },
            },

            color: this.colorPojo[this.title],
            series: [
                {
                    type: 'pie',
                    radius: ['53%', '72%'],
                    center: ['32%', '53%'],
                    avoidLabelOverlap: true,
                    label: {
                        show: false,
                        position: 'center',
                        fontSize: this.fontSizeValue,
                        color: '#fff',
                        fontWeight: 'normal',
                    },
                    labelLine: {
                        show: false,
                        length: 10,
                        length2: 6,
                        smooth: 0.2,
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 8,
                            shadowColor: this.shadowColor,
                            shadowOffsetX: 1,
                            shadowOffsetY: 8,
                        },
                        label: {
                            show: false,
                            fontSize: 12,
                        },
                    },

                    data: this.data,
                },
            ],
            graphic: [
                {
                    type: 'text',
                    top: '20%',
                    left: '58%',
                    style: {
                        text: '总数',
                        fill: '#c7ac78',
                        fontSize: 14,
                    },
                },
                {
                    type: 'text',
                    top: '32%',
                    left: '58%',
                    // left: 'center',
                    style: {
                        text: this.info.total || 0,
                        fill: '#c97842',
                        fontSize: 14,
                    },
                },
            ],
        };
        this.chartInstance.setOption(initOption);

        let curIndex = -1;
        // let that = this;
        clearInterval(this.timer);

        let timer = null;
        this.timer = setInterval(function() {
            let dataLen = initOption.series[0].data.length;
            if (dataLen) {
                curIndex = (curIndex + 1) % dataLen;
            } else {
                curIndex = (curIndex + 1) % 3;
            }
            that.curIndex = JSON.parse(JSON.stringify(curIndex));
            that.chartInstance.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: curIndex,
            });
            that.isNoHighlight = false;
            setTimeout(() => {
                that.chartInstance.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: curIndex,
                });
                that.isNoHighlight = true;
            }, 2000);
        }, 3000);
        console.log(this.timer, 'this.timer');

        // 2、鼠标移动上去的时候的高亮动画
        // this.chartInstance.on('mouseover', function(param) {
        //     isSet = false;
        //     clearInterval(_this.startCharts);
        //     charPie3currentIndex = 0;
        //     // 取消之前高亮的图形
        //     _this.chartInstance.dispatchAction({
        //         type: 'downplay',
        //         seriesIndex: 0,
        //         dataIndex: charPie3currentIndex,
        //     });
        //     // 高亮当前图形
        //     _this.chartInstance.dispatchAction({
        //         type: 'highlight',
        //         seriesIndex: 0,
        //         dataIndex: param.dataIndex,
        //     });
        //     // 显示 tooltip
        //     // _this.chartInstance.dispatchAction({
        //     //     type: 'showTip',
        //     //     seriesIndex: 0,
        //     //     dataIndex: param.dataIndex,
        //     // });
        // });
        // // 3、自动高亮展示
        // var chartHover = function() {
        //     var dataLen = initOption.series[0].data.length;
        //     // 取消之前高亮的图形
        //     _this.chartInstance.dispatchAction({
        //         type: 'downplay',
        //         seriesIndex: 0,
        //         dataIndex: charPie3currentIndex,
        //     });
        //     if (dataLen) {
        //         charPie3currentIndex = (charPie3currentIndex + 1) % dataLen;
        //     } else {
        //         charPie3currentIndex++;
        //     }
        //     console.error(charPie3currentIndex, 'charPie3currentIndex----');

        //     // 高亮当前图形
        //     _this.chartInstance.dispatchAction({
        //         type: 'highlight',
        //         seriesIndex: 0,
        //         dataIndex: charPie3currentIndex,
        //     });
        //     // 显示 tooltip
        //     // _this.chartInstance.dispatchAction({
        //     //     type: 'showTip',
        //     //     seriesIndex: 0,
        //     //     dataIndex: charPie3currentIndex,
        //     // });
        // };
        // _this.startCharts = setInterval(chartHover, 2000);
        // // 4、鼠标移出之后，恢复自动高亮
        // this.chartInstance.on('mouseout', function(param) {
        //     if (!isSet) {
        //         _this.startCharts = setInterval(chartHover, 2000);
        //         isSet = true;
        //     }
        // });
    }

    updateChart(e) {
        const dataOption = {
            series: [{ data: this.data }],
            graphic: [{}, { style: { text: this.info.total || 0 } }],
        };
        this.chartInstance.setOption(dataOption);
    }

    // 同步明细回调
    itemSyncDetailHandle() {
        this.detailShow = false;
    }

    dispose() {
        this.chartInstance.dispose(); // 销毁实例
        this.initChart();
    }

    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
        // 及时销毁echarts实例
        this.chartInstance.clear();
        this.chartInstance.dispose();
        this.chartInstance = null;
    }
}
</script>

<style scoped>
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
